<!--
 * @Description: What's this for
 * @Autor: WangYuan
 * @Date: 2021-06-07 11:19:03
 * @LastEditors: WangYuan
 * @LastEditTime: 2022-11-02 10:07:43
-->
<template>
  <div class="wrap" :style="[getWrapStyle()]">
    <div class="list" :style="[getStyle()]">
      <!-- 商品列表 -->
      <goods-item :style="[getStyle1('wrap')]" v-for="(item, index) in list" :key="index" :item="item"></goods-item>

      <div v-if="!list.length" class="flex-column row-center w-100 pt20 pb20 bg-white f14 f-grey" style="height: 320px">
        <!-- 加载中 -->
        <template v-if="loading"></template>

        <!-- 空列表 -->
        <template v-else>
          <span class="mt20">暂无商品</span>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import GoodsItem from "./GoodsItem.vue"
import { mapGetters } from "vuex"

export default {
  name: "GoodsList",

  components: { GoodsItem },

  inject: ["tabs"],

  props: {
    list: {
      type: Array,
      default: () => [],
    }
  },

  data() {
    return {
      loading: false,
    };
  },

  computed: {
    ...mapGetters(["project"]),

    attr() {
      return this.tabs.config.attrs;
    },
    itemWidth() {
      if (this.attr.listModel == "oneCols") {
        return `${this.$unit(this.contentWidth)}`;
      }
      if (this.attr.listModel == "towCols") {
        return '49%'
      }
      if (this.attr.listModel == "threeCols") {
        return `${this.$unit(this.contentWidth / 3)}`;
      }
      if (this.attr.listModel == "roll") {
        return `${this.$unit(this.contentWidth / 2.5)}`;
      }
    }
  },


  methods: {
    getWrapStyle() {
      return this.attr.listModel == "roll" ? { overflowX: "auto" } : {};
    },

    getStyle1(target) {
      // 包裹容器样式
      if (target == "wrap") {
        let result = {}
        result.width = this.itemWidth;
        return result;
      }
    },

    getStyle() {
      if (this.attr.listModel == "roll") {
        return {
          display: "flex",
          width: this.$unit((375 / 2.5) * this.list.length),
        };
      } else {
        return {
          display: "flex",
          flexWrap: "wrap",
          'justify-content': 'space-between',
          padding: `${this.$unit(5)} 0`,
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
